const path = require('path')
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html'
})

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // mode 编译模式
  // development 开发模式
  // production 生产模式，线上模式
  mode: 'development',
  // 入口配置
  entry: path.join(__dirname, '/src/index.js'),
  // 出口配置
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 配置插件的位置，是个数组，是个插件的集合
  plugins: [htmlPlugin, new VueLoaderPlugin()],
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }, {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },


      {
        test: /\.scss$/,
        use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
        }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
        }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
        }
        ]
      },
      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: 'url-loader?limit=25893 '
      },
      { test: /\.vue$/, loader: 'vue-loader' }


    ]
  }
}